import React from 'react';
import Style from './index.module.less';

function App() {
  // 登录按钮点击事件处理
  const handleLogin = () => {
    console.log('登录按钮被点击，可在这里实现跳转到登录页面等逻辑');
  };
  // 注册按钮点击事件处理
  const handleSignUp = () => {
    console.log('注册按钮被点击，可在这里实现跳转到注册页面等逻辑');
  };

  return (
    <div>
      {/* 顶部导航栏 */}
      <div className={Style.nav}>
        <div className={Style.logo}>
          <img src='../images/Ellipse.png'></img>
        </div>
        <div className={Style.navlinks}>
          <div className={Style.tabitem}>客户端</div>
          <div className={Style.tabitem}>平台端</div>
          <div className={Style.tabitem}>司机端</div>
        </div>
        <div className={Style.authbuttons}>
          <button className={Style.Login} onClick={handleLogin}>
            Login
          </button>
          <button className={Style.signup} onClick={handleSignUp}>
            Sign Up
          </button>
        </div>
      </div>

      {/* banner 区域 */}
      <div className={Style.banner}>
        <img src='../images/top.png' className={Style.top}></img>
      </div>

      {/* 功能点区域 */}
      <div className={Style.feature}>
        <img src='../images/img1.png'></img>
      </div>

      <div>
        <h2>
          系统<span className={Style.p1}>核心功能</span>介绍
        </h2>
      </div>

      <div className={Style.corefeaturesection1}>
        <div className={Style.corefeature}>
          <img src='../images/client.png' alt='客户端展示' />
          <div className={Style.featuredesc} id='client'>
            <p className={Style.p2}>客户端</p>
            <h5>CLIENT SIDE</h5>
            <p className={Style.desc}>
              <span className={Style.customfont}>在线下单：</span>
              支持线上下单及订单管理等操作，随时创建、查询订单状态，简单方便，无需繁琐操作
            </p>
            <p className={Style.desc}>
              <span className={Style.customfont}>资源查询：</span>
              方便查询各类物流资源信息，快速匹配需求，提升找车找货效率，减少人工沟通时间成本
            </p>
            <p className={Style.desc}>
              <span className={Style.customfont}>订单管理：</span>
              线上化订单管理，可以在线跟踪订单状态、物流信息，做到订单全流程可视
            </p>
            <p className={Style.desc}>
              <span className={Style.customfont}>预约配送：</span>
              可提前预约配送时间，合理安排，提高物流效率
            </p>
            <button>登录/注册</button>
          </div>
        </div>
      </div>

      <div className={Style.corefeaturesection2}>
        <div className={Style.corefeature}>
          <div className={Style.featuredesc} id='platForm'>
            <p className={Style.p2}>平台端</p>
            <h5>PLATFORM END</h5>
            <p className={Style.desc}>
              <span className={Style.customfont}>在线调度：</span>系统自动调度算法，减少人工干预成本，提升整体调度效率
            </p>
            <p className={Style.desc}>
              <span className={Style.customfont}>多端融合：</span>
              打通客户端、司机端数据，系统平台化、智能化，全方位管控订单流程、资源分配
            </p>
            <p className={Style.desc}>
              <span className={Style.customfont}>智能财务：</span>
              多维度财务数据管理，快速对账、结算，多种财务报表自动生成和分析，减少财务人员操作成本，提升财务效率
            </p>
            <p className={Style.desc}>
              <span className={Style.customfont}>数据分析：</span>
              完善的数据报表及大数据分析功能，深度挖掘数据价值，为决策提供数据支撑
            </p>
            <p className={Style.desc}>
              <span className={Style.customfont}>服务管理：</span>对整个物流服务流程进行管控，保障服务质量和效率
            </p>
            <button>登录/注册</button>
          </div>
          <img src='../images/platform.png' alt='平台端展示' />
        </div>
      </div>

      {/* 系统核心功能介绍 - 司机端 */}
      <div className={Style.corefeaturesection3} id='driver'>
        <div className={Style.corefeature}>
          <div className={Style.featuredesc1}>
            <p className={Style.p2}> 司机端</p>
            <h5>DRIVER&quot;S END</h5>
            <p className={Style.desc}>
              <span className={Style.customfont}>在线接单：</span>
              方便查看订单信息，快速接单抢单，合理安排行程，提高接单效率
            </p>
            <p className={Style.desc}>
              <span className={Style.customfont}>发布行程：</span>
           可主动发布返程行程，后台优先匹配与返程匹配的订单，提升匹配成功率，减少返程空驶率
            </p>
            <button>登录/注册</button>
            <img src='../images/driver.png' alt='司机端展示' className={Style.driver}></img>
          </div>
        </div>
      </div>

      {/* 底部区域 */}
      <div className={Style.footer}>
        <img src='../images/footer.png'></img>
      </div>
    </div>
  );
}

export default App;
